<template>
  <div class="productDetail">
    <!-- 获取商品信息 -->
    <div>
      <div class="product-top">
        <div class="row-left" @click="backFn">
          <span class="bi bi-chevron-left"></span>
        </div>
        <div class="pro-input">
          <div class="pro-search">
            <span class="bi bi-search"></span>
          </div>
          <div class="pro-inp">
            <input type="text" v-model="v1" placeholder="搜索商品信息"
            @keydown.enter="removeFn" />
          </div>
          <div class="pro-delete" @click="sweepFn">
            <span class="bi bi-x-circle"></span>
          </div>
        </div>
        <div class="pro-grow" @click="GoTo">
          <span class="bi bi-ui-radios"></span>
        </div>
      </div>
      <!-- 排序 -->
      <div class="product-sort">
        <ul>
          <li :class="{'active' : msg == 0}" @click="addSide">
            <div class="sort-list">
              <span>综合</span>
            </div>
          </li>
          <li :class="{'active' : msg == 1}" @click="addPrice">
            <div class="sort-list">
              <span>价格</span>
              <div class="icon">
                <div class="down">
                  <span class="bi bi-caret-up-fill"></span>
                </div>
                <div class="up">
                  <span class="bi bi-caret-down-fill"></span>
                </div>
              </div>
            </div>
          </li>
          <li :class="{'active' : msg == 2}" @click="addSales">
            <div class="sort-list">
              <span>销量</span>
              <div class="icon">
                <div class="up">
                  <span class="bi bi-caret-up-fill"></span>
                </div>
                <div class="down">
                  <span class="bi bi-caret-down-fill"></span>
                </div>
              </div>
            </div>
          </li>
          <li :class="{'active' : msg == 3}" @click="addNew">
            <div class="sort-list">
              <span>新品</span>
            </div>
          </li>
        </ul>
      </div>
      <!-- 没有相关产品 -->
      <div class="no-product" v-if="isHid">
        <div class="no-img">
          <img src="../../assets/img/noImg.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 猜你喜欢 -->
    <onion-like v-if="isHid"></onion-like>
    <!-- 更多内容 -->
    <onion-detail v-if="isHid"></onion-detail>
    <!-- 获取数据渲染上去 -->
    <div class="productList">
      <ul>
        <li v-for="item in findList" :key="item.id">
            <router-link :to="{path:'/commodity',query:{id : item.id}}">
            <div class="item-list">
              <div class="listPicture">
                <img :src="item.img" />
              </div>
              <div class="item-title">
                <span>{{ item.name }}</span>
              </div>
              <div class="item-price">
                <span>￥{{ item.price }}</span>
              </div>
              <div class="discount">
                <div class="discountSold">
                  <span>￥{{ item.discount }}</span>
                </div>
                <div class="sale">
                  <span>已售{{ item.sales }}件</span>
                </div>
              </div>
            </div>
            </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import onionLike from "@/components/onionLike.vue";
import onionDetail from "@/pages/mydetail/oniondetail.vue";

import { get } from "@/utils/http";
import { mapState } from "vuex";

export default {
  data() {
    return {
      v1: '',
      news : '',
      price : '',
      sales : '',
      isHid: false,
      findList: [],
      msg : 0,
    };
  },
  computed: {
    ...mapState(["classify"]),
  },
  methods: {
    //回到上一级
    backFn() {
      this.$router.go(-1);
    },
    //删除
    removeFn(){
        if(this.v1 == null){
          this.updata();
          this.isHid = false;
        }
    },
    //清空
    sweepFn(){
      this.v1 = "";
      this.updata();
    },
    //跳转到首页
    GoTo(){
       this.$router.push({path:'/home'});
    },
    addSide(){
        this.msg = 0;
        this.init();
    },
    addNew(){
      this.msg = 3;
      this.news == 0 ? (this.news = 1) : (this.news = 0);
      this.init();
    },
    addPrice(){
      this.msg = 1;
      if(this.price == ""){
        this.price = "asc";
        this.init();
      }else{
        this.price == "asc" ? (this.price = "desc") : (this.price = "asc");
        this.init();
      }
    },
    addSales(){
      this.msg = 2;
      if(this.sales = ""){
        this.init();
      }else{
        this.sales == "asc" ? (this.sales = "desc") : (this.sales = "asc");
        this.init();
      }
    },
    //初始化页面
    init() {
      let _this = this;
      this.v1 = this.$route.params.v1;
      this.news = this.news;
      get(`/api/products?page=1&limit=8&keyword=${this.v1}&news=${this.news}&priceOrder=${this.price}&salesOrder=${this.sales}`).then(
        (response) => {
          let res = response.data.data;
          //判断是否有值，没有则未获取数据显示
          if (res.length == 0) {
            _this.isHid = true;
          } else {
            let arr = [];
            res.forEach((item) => {
              let obj = {};
              obj.id = item.id;
              obj.img = item.image;
              obj.name = item.store_name;
              obj.price = item.price;
              obj.discount = item.vip_price;
              obj.sales = item.sales;
              arr.push(obj);
              this.findList = arr;
              // console.log(this.findList, 111);
            });
          }
        }
      );
    },
    //数据改变，为空，全出现
    updata() {
      get("/api/products").then((response) => {
        let res = response.data.data;

        let arr2 = [];
        res.forEach((item) => {
          let obj = {};
          obj.id = item.id;
          obj.img = item.image;
          obj.name = item.store_name;
          obj.price = item.price;
          obj.discount = item.vip_price;
          obj.sales = item.sales;
          arr2.push(obj);
        });
        this.findList = arr2;
        // console.log(this.findList, 222);
        this.$store.dispatch("search/setsearchListAsync", arr2);
      });
    },
  },
  components: {
    onionLike,
    onionDetail,
  },

  created() {
    this.init();
    if (this.v1 == null) {
      this.updata();
      this.isHid = false;
    }
  },
  mounted() {
    if (this.v1 == null) {
      this.updata();
    }
  },
};
</script>

<style lang="less">
@import "../../assets/css/reset.css";
@import "../../assets/less/variable.less";

.product-top {
  width: 100%;
  height: 60px;
  background: #fff;
  &::before {
    content: "";
    display: block;
    clear: both;
  }
  > div {
    float: left;
  }
  .row-left {
    width: 30px;
    height: 50px;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
  }
  .pro-input {
    width: 75%;
    height: 50px;
    position: relative;
    > div {
      position: absolute;
    }
    .pro-search {
      width: 20px;
      height: 20px;
      margin-left: 25px;
      margin-top: 18px;
      font-size: 16px;
      z-index: 1001;
      color: #cbccce;
    }
    .pro-inp {
      width: 100%;
      input {
        width: 80%;
        height: 30px;
        border: none;
        outline: none;
        border-radius: 20px;
        background: #f0f0f0;
        margin-top: 10px;
        margin-left: 15px;
        padding-left: 30px;
        font-size: 14px;
      }
    }
    .pro-delete {
      width: 20px;
      height: 20px;
      margin-left: 86%;
      margin-top: 18px;
      font-size: 16px;
      color: #cbccce;
    }
  }
  .pro-grow {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
  }
}
//排序
.product-sort {
  height: 50px;
  font-size: 14px;
  background: #fff;
  border-bottom: 1px solid #999999;
  ul {
    display: flex;
    li {
      width: 60px;
      height: 45px;
      padding-left: 5px;
      margin-left: 25px;
      box-sizing: border-box;
    }
    .active{
      border-bottom: 3px solid #912db2;
      padding-top: -10px;
    }
  }
}
.sort-list {
  position: relative;
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  .icon {
    width: 20px;
    height: 50px;
    position: absolute;
    margin-left: 45px;
    margin-top: -55px;
    > div {
      height: 8px;
      span {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}

.no-product {
  width: 100%;
  height: 300px;
  .no-img {
    width: 100%;
    height: 300px;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
  .no-text {
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
    color: #f0f0f0;
  }
}

// 数据渲染
.productList {
  width: 100%;
  ul {
    ::before {
      content: "";
      display: block;
      clear: both;
    }
    li {
      width: 180px;
      height: 250px;
      float: left;
      margin-left: 5px;
      margin-top: 20px;
    }
  }
}
.item-list {
  width: 180px;
  height: 250px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 2px 1px 10px #c7c7c7;
  .listPicture {
    width: 180px;
    height: 150px;
    img {
      width: 100%;
      height: 100%;
      display: block;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }
  .item-title {
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    padding-left: @padding2;
  }
  .item-price {
    height: 25px;
    font-size: 18px;
    padding-left: @padding2;
    color: #912db2;
    font-weight: bold;

  }
  .discount {
    height: 30px;
    display: flex;
    > div {
      width: 80px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      margin-left: 9px;
    }
    .discountSold {
      font-weight: bold;
    }
    .sale {
      color: #aaa;
      box-sizing: border-box;
      padding-left: 5px;
    }
  }
}
</style>